<template>
  <div class="get-grade-wrap">
    <loader :loading="loading">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>教务系统</el-breadcrumb-item>
        <el-breadcrumb-item>成绩查询</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="select_wrap">
      <!-- 查询成绩选项 -->
      <el-select class="select sw-item" v-model="year">
        <el-option label="--请选择要查询的学年--" value=""></el-option>
        <el-option label="2014-2015" value="2014"></el-option>
        <el-option label="2015-2016" value="2015"></el-option>
        <el-option label="2016-2017" value="2016"></el-option>
        <el-option label="2017-2018" value="2017"></el-option>
        <el-option label="2018-2019" value="2018"></el-option>
        <el-option label="2019-2020" value="2019"></el-option>
        <el-option label="2020-2021" value="2020"></el-option>
        <el-option label="2021-2022" value="2021"></el-option>
        <el-option label="2022-2023" value="2022"></el-option>
        <el-option label="2023-2024" value="2023"></el-option>
        <el-option label="2024-2025" value="2024"></el-option>
        <el-option label="2025-2026" value="2025"></el-option>
      </el-select>
      <el-select class="select sw-item" v-model="term">
        <el-option label="--请选择要查询的学期--" value=""></el-option>
        <el-option label="1" value="3"></el-option>
        <el-option label="2" value="12"></el-option>
      </el-select>
      <el-button @click="handleGetGrade" class="sw-item" type="primary" icon="el-icon-search" plain>查询</el-button>
      </div>
      <!-- 显示成绩区域 -->
      <div class="content">
        <el-scrollbar ref="bar" style="height: 100%">
          <!-- 查询到成绩 -->
          <div v-if="gradeList.length !== 0">
            <!-- 展示成绩数据 -->
            <div class="table_wrap">
              <el-table :data="gradeList" stripe>
                <el-table-column 
                  prop="class"
                  label="班级"/>
                  <el-table-column 
                  prop="course"
                  label="课程名"/>
                  <el-table-column 
                  prop="department"
                  label="学院"/>
                  <el-table-column 
                  prop="grade"
                  label="成绩"/>
                  <el-table-column 
                  prop="major"
                  label="专业"/>
                  <el-table-column 
                  prop="sex"
                  label="性别"/>
                  <el-table-column 
                  prop="student_name"
                  label="姓名"/>
                  <el-table-column 
                  prop="teacher_name"
                  label="教师"/>
              </el-table> 
            </div>
          </div>
          <div v-else class="content_none">
            <el-empty description="没有内容哦~" />
          </div>
        </el-scrollbar>
        
      </div>
    </loader>
    
  </div>
</template>

<script>
  import Loader from '@/components/Loader'
  // 网络请求模块
  import { loginEducation, getGrade } from '@/network/index'
  import reLogin from '@/assets/js/ReLogin'

  export default {
    name: 'GetGrade',
    components: {
      Loader
    },
    data() {
      return {
        // 学年
        year: '',
        // 学期
        term: '',
        // 成绩列表
        gradeList: [],
        loading: false
      }
    },
    computed: {
      // 登录教务系统的凭证
      CASTGC() {
        return this.$store.state.CASTGC
      }
    },
    methods: {
      // 需要注意多异步请求问题
      async handleGetGrade() {
        this.loading = true
        // 先判断是否已经获得了教务系统token
        let { jsessionId, sfCookie18 } = this.$store.state.Edu
        // 查询成绩
        let res = await getGrade(jsessionId, sfCookie18, this.year, this.term)
        if(res.data === "") {
          let res1 = await loginEducation(this.CASTGC)
          if(res1.data.status === 'ERROR') {
            // 本地存储的token已失效，自动重新登录
            try{
              let CASTGC = await reLogin()
              this.$store.commit('handleLogin', CASTGC)
              res1 = await loginEducation(this.CASTGC)
            }catch(err) {
              this.$notify.error({
                title: '失败',
                message: '通行证失效，请尝试重新登录'
              })
              this.loading = false
              return
            }
          }
          jsessionId = res1.data.jsessionId
          sfCookie18 = res1.data.sfCookie18
          this.$store.commit('updateEdu', { jsessionId, sfCookie18 })
          // 重新调用自己
          this.handleGetGrade()
        }else if(!(res.data.length === 1 && res.data[0].class === null)) {
          this.gradeList = res.data
        }else {
          // 查无结果
          this.gradeList = []
        }
        this.loading = false
      }
    }
  }
</script>

<style scoped>

  .select_wrap {
    line-height: 70px;
    box-shadow: 0 3px 8px rgba(100, 100, 100, 0.1);
  }

  .sw-item {
    margin: 0 10px;
  }

  .content {
    width: 100%;
    height: 100%;
    /* overflow-y: auto; */
  }

  .content_none {
    width: 50%;
    margin: 60px auto 0;
    text-align: center;
  }

  .content_none img {
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
  }

  .content_none span {
    color: #666;
  }

</style>